<template>
  <!--首页-->
  <div>
    <!--    <head-view></head-view>-->
    <el-row type="flex" class="row-bg" justify="space-around">
      <!--左-->
      <el-col :span="6">
        <!--<div>
          &lt;!&ndash;会话搜索&ndash;&gt;
          <el-row type="flex" gutter="5">
            <el-col :span="12">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="会话">
                  <el-input placeholder="搜索"
                            prefix-icon="el-icon-search"
                            v-model="search"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
             <div>
               <el-button type="primary" size="small">搜索</el-button>
             </div>
            </el-col>
          </el-row>

        </div>-->
        <div class="huihuansousuo">
          <div>
            <el-form ref="form" :model="form" label-width="40px">
              <el-form-item label="会话">
                <el-input v-model="search">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <!--    <div>
                <el-button type="primary" size="small">搜索</el-button>
              </div>-->
        </div>
      </el-col>
      <!--中-->
      <el-col :span="10">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>测试2</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-table
            :data="getDatas"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
              prop="id"
              label="编号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="number"
              label="电话"
              width="180">
            </el-table-column>
          </el-table>
          <div class="block">
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="getDatas.length">
            </el-pagination>
          </div>
        </div>
      </el-col>
      <!--右-->
      <el-col :span="8">
        <div>
          <!--标签页-->
          <el-tabs v-model="activeName"@tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
        <!--  <el-tabs v-model="activeName" @tab-click="handleClick">-->
          <!--  <el-tab-pane label="聊天" name="first">
              &lt;!&ndash;成员列表&ndash;&gt;
              &lt;!&ndash;<div class="userList">
                <span>成员列表</span>
              </div>&ndash;&gt;
         &lt;!&ndash;     <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  width="180">
                </el-table-column>
              </el-table>&ndash;&gt;
            </el-tab-pane>-->
         <!--   <el-tab-pane label="文件" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="设置" name="third">设置</el-tab-pane>-->
<!--          </el-tabs>-->
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import newApi from '@/api/test'

  export default {
    name: 'index',
    data () {
      return {
        datas: {
          fleetId: 6,
          all: 1,
        },
        getDatas:[],
        // 获取用户列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 2
        },
        userlist: [],
        total: 0,
        search: '搜索',
        activeName: 'first',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      }

    },
    created () {
      this.getDataPub()
    },
    methods: {
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getUserList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getUserList()
      },
   /*   handleClick (tab, event) {
        console.log(tab, event)
      },
      async getDataPub () {
        const {data: res} = await this.$axios.post(
          '/scs/events/querySubscriber',
          {
            params: this.queryInfo
          },
        headers:{}
        )
        console.log(res)

      }*/
       getDataPub () {
        this.$axios.post('/scs/events/querySubscriber', {
          fleetId: 67,
          all: 1
        })
          .then(res => {
            //       // 返回数据
            this.getDatas = res.data.obj;
            this.total = this.getDatas.length();
            console.log(this.getDatas)
          })
       /*   .then(function (response) {
            console.log(response.request.response);
          })*/
          .catch(function (error) {
            console.log(error);
          });
      }


      // getDataPub(){
      //   /*{"fleetId":67,"all":1}*/
      //   newApi.querySubscriber(
      //     {fleetId:67,all:1}
      //   )
      //     .then(res => {
      //       // 返回数据
      //       console.log("数据")
      //       let aaa = JSON.parse(res)
      //       console.log(aaa)
      //
      //     })
      //     .catch(err => {
      //       // 异常情况
      //     })
      // }
    }
  }
</script>

<style scoped>
  .el-main[data-v-fae5bece]{
    line-height: 190px !important;
  }
  .userList {
    background-color: #D7D7D7;
    text-align: center;
  }

  .huihuansousuo {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
  }

</style>
